<template>
  <div class="score-container">
    <el-card class="box-card">
      <template #header>
        <div class="clearfix">
          <span>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>成绩管理</el-breadcrumb-item>
            </el-breadcrumb></span
          >
        </div>
      </template>
      <div>
        <el-input
          placeholder="请输入学号或名字"
          prefix-icon="el-icon-search"
          v-model="keyword"
          size="small"
          style="width: 250px; margin-left: 10px"
        >
        </el-input>
        <el-select
          v-model="collegeId"
          size="small"
          clearable
          style="width: 250px; margin-left: 10px"
          placeholder="请选择学生所在学院"
          @change="collegeChange(collegeId)"
        >
          <el-option
            v-for="(item, index) in collageinfo"
            :key="index"
            :label="item.collageName"
            :value="item.collageNum"
          ></el-option>
        </el-select>
        <el-select
          size="small"
          style="width: 250px; margin-left: 10px"
          v-model="majarId"
          clearable
          placeholder="请选择学生所在专业"
          @change="majorChange(majarId)"
        >
          <el-option
            v-for="(item, index) in majors"
            :key="index"
            :label="item.majorName"
            :value="item.majorNum"
          ></el-option>
        </el-select>

        <el-select
          size="small"
          style="width: 250px; margin-left: 10px"
          v-model="classId"
          clearable
          placeholder="请选择学生所在班级"
          @change="classChange"
        >
          <el-option
            v-for="(item, index) in clazz"
            :key="index"
            :label="item.className"
            :value="item.classNum"
          ></el-option>
        </el-select>
      </div>
      <el-table
        ref="multipleTable"
        :data="socres"
        tooltip-effect="dark"
        v-loading="loading"
        :stripe="true"
        :height="maxHeight"
        style="width: 100%; top: 15px"
        :row-class-name="getRowClass"
      >
        <el-table-column type="expand">
          <template #default="props">
            <el-table
              :data="getData(props.row.scoreVOS, props.row.courseName)"
              size="mini"
              style="width: 100%; top: -15px"
              max-height="300px"
            >
              <el-table-column width="300">
                <template #header>
                  <div style="width: 55px">课程名称</div>
                  <el-input
                    v-model="props.row.courseName"
                    size="mini"
                    clearable
                    placeholder="输入关键字搜索"
                  />
                </template>
                <template #default="scope">
                  {{ scope.row.courseName }}
                </template>
              </el-table-column>
              <!-- <el-table-column prop="courseName" label="课程名称" width="300">
              </el-table-column> -->
              <el-table-column prop="courseId" label="课程编号" width="180">
              </el-table-column>
              <el-table-column prop="credit" label="学分" width="80">
              </el-table-column>
              <el-table-column prop="score" label="成绩" width="80">
              </el-table-column>
              <el-table-column
                prop="semester"
                label="学期"
                column-key="semester"
                :filters="getSemester(props.row.scoreVOS)"
                :filter-method="filterHandler"
              >
              </el-table-column>
              <el-table-column
                prop="type"
                :filter-method="filterHandler"
                column-key="type"
                :filters="[
                  { value: '必修', text: '必修' },
                  { value: '选修', text: '选修' },
                  { value: '任选', text: '任选' },
                ]"
                label="课程类型"
              >
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="studentId" label="学号"> </el-table-column>
        <el-table-column prop="studentName" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="collageName" label="学院" width="200">
        </el-table-column>

        <el-table-column
          prop="majorName"
          label="专业"
          width="200"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="className" label="班级"></el-table-column>

        <el-table-column
          prop="total"
          label="总学分"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="compulsory" label="必修学分"></el-table-column>
        <el-table-column
          prop="elective"
          label="选修学分"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="publicElective"
          label="公共选修学分	"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
      <div style="margin-top: 30px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[15, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :disabled="loading"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
import { UserService, Collageinfo } from "@/api/user";
import { reactive, toRefs, watch } from "vue";
import { ScoreService } from "@/api/score";
import Code from "@/consts/common";

export default {
  name: "scoreList",
  setup() {
    const handleSizeChange = (size: number) => {
      data.pageSize = size;
    };
    const handleCurrentChange = (page: number) => {
      data.currentPage = page;
    };
    const collageinfo: Collageinfo[] = [];
    const getCollageinfo = () => {
      UserService.getCollageinfo().then((res) => {
        if (res.code == Code.CODE_SUCCESS) {
          data.collageinfo = res.data;
        }
      });
    };
    getCollageinfo();
    const collegeChange = (collegeId: string) => {
      data.collegeId = collegeId;
      data.majarId = "";
      getMajors(collegeId);
      list();
    };
    const majorChange = (majarId: string) => {
      data.majarId = majarId;
      getClass(majarId);
      list();
    };
    const classChange = () => {
      list();
    };
    const getMajors = (id: string) => {
      if (id == "") {
        data.majors = [];
        data.majarId = "";
        data.classId = "";
        data.clazz = [];
      } else {
        UserService.getCollageinfoById(id).then((res) => {
          if (res.code == Code.CODE_SUCCESS) {
            // @ts-ignore
            data.majors = res.data;
          }
        });
      }
    };
    const getClass = (id: string) => {
      if (id == "") {
        data.clazz = [];
        data.classId = "";
      } else {
        UserService.getMajorinfoClass(id).then((res) => {
          if (res.code == Code.CODE_SUCCESS) {
            // @ts-ignore
            data.clazz = res.data;
          }
        });
      }
    };
    let data = reactive({
      maxHeight: document.documentElement.clientHeight - 280,
      keyword: "",
      socres: [],
      clazz: [],
      loading: false,
      total: 0,
      fullscreenLoading: false,
      currentPage: 1,
      pageSize: 15,
      dialogVisible: false,
      collageinfo: collageinfo,
      majors: [],
      collegeId: "",
      majarId: "",
      classId: "",
    });
    const getHeight = () => {
      data.maxHeight = document.documentElement.clientHeight - 280;
    };

    const list = () => {
      data.loading = true;
      ScoreService.list({
        page: data.currentPage,
        size: data.pageSize,
        keyword: data.keyword,
        collageNum: data.collegeId,
        majorNum: data.majarId,
        classNum: data.classId,
        // @ts-ignore
      }).then((res) => {
        const { total } = res.data;
        data.socres = res.data.data;
        data.total = total;
        data.loading = false;
      });
    };
    list();

    const getSemester = (arr: any[]) => {
      let a: string[] = [];
      arr?.forEach((item) => {
        if (!a.includes(item.semester)) {
          a.push(item.semester);
        }
      });
      return a.map((item) => {
        return { text: item, value: item };
      });
    };
    watch(
      () => data.keyword,
      (newValue, oldVlaue) => {
        data.keyword = newValue;
        // @ts-ignore
        list();
      }
    );
    watch(
      () => data.pageSize,
      (newValue, oldVlaue) => {
        data.pageSize = newValue;
        // @ts-ignore
        list();
      }
    );
    watch(
      () => data.currentPage,
      (newValue, oldVlaue) => {
        data.currentPage = newValue;
        // @ts-ignore
        list();
      }
    );
    const filterHandler = (value: any, row: any, column: any) => {
      const property = column["property"];
      return row[property] === value;
    };
    const getData = (arr: any[], courseName: string) => {
      if (!courseName) return arr;
      return arr?.filter((item) => {
        if (item.courseName.indexOf(courseName) !== -1) {
          return item;
        }
      });
    };

    /// @ts-ignore
    const getRowClass = ({ row, index }) => {
      let res = [];
      if (!row.scoreVOS.length) {
        res.push("row-expand-cover");
      }
      return res;
    };
    window.addEventListener("resize", getHeight, false);
    return {
      ...toRefs(data),
      getSemester,
      filterHandler,
      handleSizeChange,
      handleCurrentChange,
      getData,
      collegeChange,
      majorChange,
      getClass,
      classChange,
      getRowClass,
    };
  },
};
</script>

<style lang="less">
.score-container {
  .el-table__column-filter-trigger i {
    font-size: 17px;
    font-weight: bold;
    margin-left: 5px;
  }
  .el-table th > .cell {
    display: flex;
  }
  .el-input--mini {
    width: 150px;
  }
  .row-expand-cover .el-table__expand-column .cell {
    visibility: hidden;
  }
}
</style>
